<template>

    项目名称:<input type="text" v-model="Name" >
    项目总金额:<input type="text" v-model="MinMoney" >—
    <input type="text" v-model="MaxMoney" >

    <input type="button" value="查询"  @click="ShowInvestInfo" />

    <table class="table table-bordered" border="1">
        <thead>
            <tr style="background-color: #bf41d8cc">
                <th>投资项目编号</th>
                <th>投资项目名称</th>
                <th>投资总金额</th>
                <th>已投资金额</th>
                <th>投资剩余额度</th>
                <th>投资次数</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>
            <tr v-for="item in Invest" >
                <td>{{ item.I_Id }}</td>
                <td>{{ item.I_Name }}</td>
                <td>{{ item.I_Budget }}</td>
                <td>{{ item.I_Receive }}</td>
                <td>{{ item.I_Residue }}</td>
                <td>{{ item.I_Number }}</td>
                <td>
                    <!-- 声明插槽 -->
                    <slot :id="item.I_Id" ></slot>
                </td>
            </tr>
        </tbody>

    </table>

    <span>
        共{{ Page.PageCount }}条数据,每页显示{{ Page.PageSize }}条,当前{{ Page.PageIndex }}/{{ Page.totalCount }}页
    </span>

    <a href="#" @click="PageS(1)" >首页</a>&nbsp;&nbsp;
    <a href="#" @click="PageS(Page.PageIndex-1)" >上一页</a>&nbsp;&nbsp;
    <a href="#" @click="PageS(Page.PageIndex+1)" >下一页</a>&nbsp;&nbsp;
    <a href="#" @click="PageS( Number(Page.totalCount) )" >尾页</a>&nbsp;&nbsp;

    <select v-model="NewPs" @change="NewPas">
        <option value="1"  >每页显示1条</option>
        <option value="2" >每页显示2条</option>
        <option value="3" >每页显示3条</option>
    </select>

    <input type="text" style="width: 40px;" v-model="NewPI"  >
    <input type="button" value="跳转" @click="NewPaI" />

</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue';
import axios from 'axios';

//显示的响应式数据
const Invest = ref([{
    I_Id:'',
    I_Name:'',
    I_Budget:'',
    I_Receive:'',
    I_Residue:'',
    I_Number:'',
}])

//查询的响应式数据
const Name = ref('');
const MinMoney = ref('');
const MaxMoney = ref('');

//分页的响应式数据
const Page = ref({
    PageIndex:1,//当前页
    PageSize:1,//每页显示条数
    PageCount:'',//总条数
    totalCount:''//总页数
})
const NewPs = ref('');
const NewPI = ref();

//生命周期函数
onMounted (()=>{
    ShowInvestInfo();
})

// 显示 查询 分页方法
const ShowInvestInfo = ()=>{
    axios({
        method:'get',
        url:'http://localhost:63517/api/Invest/ShowInvestInfo',
        params:{
            Name:Name.value,
            MinMoney:MinMoney.value,
            MaxMoney:MaxMoney.value,
            PageIndex:Page.value.PageIndex,
            PageSize:Page.value.PageSize
        }
    })
    .then(function(res){
        console.log(res.data);
        Invest.value = res.data.list;
        Page.value.PageCount = res.data.PageCount;
        Page.value.totalCount = res.data.totalCount;
    })
    .catch(function(err){
        console.log(err);
    })
}

//翻页方法
const PageS = (i:number )=>{
    if(i>=1 && i<= Number(Page.value.totalCount) ){
        Page.value.PageIndex = i;
        ShowInvestInfo();
    }
    else{
        alert("页码有误!");
        return;
    }
}

//改变页容量方法
const NewPas = ()=>{
    Page.value.PageSize = Number(NewPs.value); 
    ShowInvestInfo();
}

//跳转指定页码方法
const NewPaI = ()=>{

    if(NewPI.value == ''){
        alert('页码不能为空!');
        NewPI.value = '';
        return;
    }

    if(isNaN(Number(NewPI.value))){
        alert('页码必须为数字!');
        NewPI.value = '';
        return;
    }


    if(NewPI.value>=1 && NewPI.value<= Number(Page.value.totalCount) ){
        Page.value.PageIndex = NewPI.value;
        ShowInvestInfo();
    }
    else{
        alert("页码有误!");
        NewPI.value = '';
        return;
    }
}



</script>